<template>
    <div class="person">
        <ul>
            <li v-for="person in list" :key="person.id">
                {{ person.name }} -- {{ person.age }}
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { defineProps, withDefaults } from 'vue'
    import { type Persons } from '@/types'
    // defineProps(['a'])

    // let x = defineProps(['a', 'list'])

    // defineProps<{list:Persons}>()

    withDefaults(defineProps<{list:Persons}>(), {
        list: () => [{id: 'default', name: 'default', age: 0}]
    })
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
    li {
        font-size: 20px;
    }
</style>